<template>
  <div style="width:100%;height:100%;position:relative;transform-origin: center center;transform: scaleX(0.8);margin:0 auto;" v-cloak>
    <div id="earth_3d" style="width:100%;height:100%">

    </div>

    <div class="legend">
        <ul>
          <li v-for="item in traffic" :key="item.code">
               <input :id="item.code" type="checkbox" v-model="item.status" @change="doSwitch(item.code, item.status)" />   <label :style="{color:item.color, 'margin-top':'-5px'}" :for="item.code"><img width=15 height=15 style="margin-top:-7px;" :src="item.icon" alt=""/> {{item.name}} </label><!-- <img width=15 height=15 :src="item.icon" alt=""/>-->
          </li>

          <!-- <input type="checkbox" @change="do1()"> -->
        </ul>
    </div>


  </div>

</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
//var customData = {};
//航班信息
var data = {};
var airports_opened = [];
var airports_closed = [];
var aiportNames_opened = [];
var aiportNames_closed = [];
var routes = [];
var route2 = [];

//卡班信息
var truckData = {};
var truck_opened = [];
var truck_closed = [];
var truckOpenedRoutes = [];
var truckClosedRoutes = [];
var truckOpenedName = [];
var truckClosedName = [];
var truckLocations = [];
var truckClosedLocations = [];

//航运信息
var boat_opened = [];
var boat_closed = [];
var boatOpenedRoutes = [];
var boatClosedRoutes = [];
var boatOpenedName = [];
var boatClosedName = [];
var boatLocations = [];
var boatClosedLocations = [];

//仓库信息
var wmsData = {};
var warhouse_inter = [];
var warhouseNames_inter = [];
var warhouse_cross = [];
var warhouseNames_cross = [];
var wmsInter = []; //国内仓库
var wmsCross = []; //海外仓库
var wmsRouteConfig = [];
var wmsRoute = [];

var ROOT_PATH =
  "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

export default {
  name: "ditu",
  data() {
    return {
      planePath:
        "path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm271.5 719.5c-35.3 35.3-76.4 63-122.1 82.3-47.3 20-97.6 30.2-149.4 30.2s-102.1-10.1-149.4-30.2c-45.7-19.3-86.8-47-122.1-82.3s-63-76.4-82.3-122.1c-20-47.3-30.2-97.6-30.2-149.4s10.1-102.1 30.2-149.4c19.3-45.7 47-86.8 82.3-122.1s76.4-63 122.1-82.3c47.3-20 97.6-30.2 149.4-30.2s102.1 10.1 149.4 30.2c45.7 19.3 86.8 47 122.1 82.3s63 76.4 82.3 122.1c20 47.3 30.2 97.6 30.2 149.4s-10.1 102.1-30.2 149.4c-19.3 45.7-47 86.8-82.3 122.1z M544 685V543l256 64v-64L544 416.3V282c0-54.6-14.4-99-32-99s-32 44.4-32 99v134.3L224 543v64l256-64v177l-128 70v35l160-29.2L672 825v-35l-128-70v-35z",
      truckPath:
        "path://M816.80384 570.40896h-19.64032V343.9616H504.46336l-0.04096 153.78432-3.80928-0.04096v-102.2976h-132.01408l-59.33056 102.44096h-87.28576v72.56064h-14.80704v40.96h14.80704v25.6h51.48672a53.39136 53.39136 0 0 0 52.34688 43.08992 53.37088 53.37088 0 0 0 52.28544-43.08992h252.43648a53.39136 53.39136 0 0 0 52.28544 43.08992c25.96864 0 47.5136-18.5344 52.36736-43.08992h61.99296v-25.6h19.64032v-40.96h-0.02048z m-491.008 89.14944c-18.16576 0-32.8704-14.76608-32.8704-32.84992s14.76608-32.84992 32.8704-32.84992 32.84992 14.76608 32.84992 32.84992-14.7456 32.84992-32.84992 32.84992z m357.00736 0c-18.1248 0-32.84992-14.76608-32.84992-32.84992s14.72512-32.84992 32.84992-32.84992c18.16576 0 32.8704 14.76608 32.8704 32.84992s-14.70464 32.84992-32.8704 32.84992z m93.88032-43.06944h-41.55392c-4.79232-24.51456-26.39872-43.08992-52.3264-43.08992s-47.47264 18.55488-52.28544 43.08992H378.0608a53.37088 53.37088 0 0 0-52.28544-43.08992c-25.92768 0-47.5136 18.55488-52.3264 43.08992h-31.00672v-98.16064h78.58176l59.35104-102.44096h99.7376v102.07232l44.76928 0.43008 0.04096-153.98912h251.71968v252.08832h0.04096z m-384.45056-180.1216h68.68992v79.79008h-114.93376l46.24384-79.79008z",
      warhousePath:
        "path://M433.048 157.845c22.74-23.043 53.113-33.978 83.097-32.752 27.355 0.612 54.457 11.772 74.685 33.277l6.274 6.672 329.473 342.037c18.106 18.797 5.1 50-20.74 50.622l-0.788 0.01-65.135-0.001v296.917c0 60.348-48.43 109.384-108.542 110.358l-1.825 0.015H298.028c-60.954 0-110.368-49.416-110.368-110.373V557.71h-77.709c-26.27 0-39.645-31.365-21.825-50.318l0.55-0.571z m17.17 480.2H332.954c-22.858 0-41.388 18.531-41.388 41.39v117.271c0 22.86 18.53 41.39 41.388 41.39H450.22c22.858 0 41.388-18.53 41.388-41.39v-117.27c0-22.86-18.53-41.39-41.388-41.39z m243.73 0H576.682c-22.858 0-41.388 18.531-41.388 41.39v117.271c0 22.86 18.53 41.39 41.388 41.39h117.266c22.858 0 41.388-18.53 41.388-41.39v-117.27c0-22.86-18.53-41.39-41.388-41.39z m-243.73-246.039H332.954c-22.858 0-41.388 18.531-41.388 41.39v117.271c0 22.86 18.53 41.39 41.388 41.39H450.22c22.858 0 41.388-18.53 41.388-41.39v-117.27c0-22.86-18.53-41.39-41.388-41.39z",
      boatPath:
        "path://M1070.28401 775.28c-57.07 59.38-112.97 88.47-166.11 86.6-38.99-1.4-63.9-18.9-92.73-39.16-32.16-22.59-68.6-48.22-126.08-49.5-57.72-0.76-93.65 25.13-125.15 48.44-30.32 22.43-54.28 40.05-96.36 34.14-34.98-4.97-58.26-19.18-85.21-35.63-27.58-16.84-58.85-35.91-104.13-43.39-80.15-13.36-168.19 16.18-261.6 87.53-11.97 9.15-14.26 26.27-5.12 38.24 9.16 11.99 26.27 14.24 38.24 5.13C127.00401 845.84 200.94401 819.9 265.60401 830.6c34.8 5.75 58.99 20.51 84.6 36.14 28.05 17.12 59.84 36.52 105.95 43.09 64.2 9.04 102.63-19.25 136.5-44.3 28.02-20.73 52.2-39.55 91.49-37.74 40.89 0.91 66.39 18.83 95.92 39.57 31.38 22.06 66.97 47.07 122.14 49.06 2.32 0.09 4.64 0.12 6.95 0.12 67.07 0 134.46-34.78 200.46-103.46 10.44-10.85 10.1-28.13-0.76-38.58-10.86-10.42-28.11-10.07-38.57 0.78zM1143.61401 371.54c-6.87-10.12-18.28-16.16-30.19-16.16l-257.55-3.03c-10.14-0.17-18.98 3.07-26.49 8.92L785.40401 395.4H452.56401V142.9c0-19.4-15.77-35.18-35.17-35.18h-76.6c-19.4 0-35.18 15.78-35.18 35.18v122.85h-16.73l-1.42-48.57c-0.6-19.12-16.05-34.09-35.17-34.09H176.70401c-19.4 0-35.18 15.78-35.18 35.18v90.03H94.03401c-19.4 0-35.17 15.77-35.17 35.17v51.94h-21.98c-11.68 0-22.79 5.61-29.71 15.02-6.93 9.4-8.99 21.69-5.52 32.84l96.18 225.16c0.37 0.87 0.89 1.61 1.34 2.42-27.62 13.99-55.76 31.47-84.47 53.39-11.97 9.15-14.26 26.27-5.12 38.24 9.11 11.97 26.27 14.24 38.23 5.13 80.97-61.84 154.87-87.76 219.57-77.08 34.8 5.77 58.99 20.53 84.6 36.16 28.05 17.12 59.84 36.52 105.96 43.09 64.24 9.02 102.64-19.25 136.5-44.3 28.02-20.71 52.17-39.52 91.5-37.74 40.89 0.89 66.39 18.83 95.93 39.57 31.38 22.06 66.96 47.07 122.12 49.06 2.32 0.09 4.64 0.12 6.96 0.12 67.06 0 134.46-34.78 200.46-103.46 10.44-10.85 10.1-28.13-0.76-38.58-10.85-10.41-28.12-10.09-38.58 0.78-17.16 17.85-34.2 32.61-51.11 44.96l126.43-274.28a36.866 36.866 0 0 0-3.78-34.37zM113.43401 362.85h47.48c19.4 0 35.17-15.78 35.17-35.18v-90.03h37.41l1.42 48.51c0.56 19.16 16 34.16 35.16 34.16h54.94c19.4 0 35.18-15.78 35.18-35.18V162.28h37.81V395.4H113.43401v-32.55z m792.52 358.97c-38.99-1.4-63.88-18.92-92.71-39.16-32.16-22.61-68.61-48.22-126.09-49.5-57.72-0.71-93.64 25.13-125.15 48.44-30.33 22.43-54.34 40.07-96.37 34.14-34.98-4.97-58.27-19.18-85.22-35.63-27.58-16.84-58.85-35.93-104.13-43.41-40.59-6.71-83.22-2.37-127.53 12.72-0.26-0.82-0.43-1.65-0.77-2.45l-29.27-68.41h889.03L943.50401 717.89c-12.65 2.91-25.18 4.34-37.55 3.93zM1032.90401 523.99H95.37401L63.71401 449.97h725.22c9.75 0 19.39-3.3 27.14-9.31l43.43-33.7 226.14 2.66L1032.90401 523.99z",
      myChart: null,
      option: {},
      baseTexture: "http://171.8.68.79:8082/static/img/word_mapz.jpg",
      // baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg"
      earthRotateSpeed: 5,
      fontSize: 12,
      config: {
        light: {
          ambint: 1.5,
          main: 0.6
        }
      },
      wather:{
        temp:"",
        wind:"",
        info:""
      },
      traffic: [
        {
          name: "机场",
          code: "plane",
          status: 1,
          icon: require("@/assets/img/plane.png"),
          color: "#44b7cb"
        },
        {
          name: "卡班",
          code: "truck",
          status: 1,
          icon: require("@/assets/img/trunk.png"),
          color: "#9f5eef"
        },
        {
          name: "轮船",
          code: "boat",
          status: 1,
          icon: require("@/assets/img/boat.png"),
          color: "#ffdf30"
        },
        {
          name: "仓库",
          code: "whs",
          status: 1,
          icon: require("@/assets/img/whs.png"),
            color: "#ff8808",
        }
      ],

      context: {
        data: {
          plane_opened_route: routes,
          plane_closed_route: route2,
          plane_opened_label: aiportNames_opened,
          plane_closed_label: aiportNames_closed,
          plane_opened_location: airports_opened,
          plane_closed_location: airports_closed,

          boat_opened_route: boatOpenedRoutes,
          boat_closed_route: boatClosedRoutes,
          boat_opened_label: boatOpenedName,
          boat_closed_label: boatClosedName,
          boat_opened_location: boatLocations,
          boat_closed_location: boatClosedLocations,

          truck_opened_route: truckOpenedRoutes,
          truck_closed_route: truckClosedRoutes,
          truck_opened_label: truckOpenedName,
          truck_closed_label: truckClosedName,
          truck_opened_location: truckLocations,
          truck_closed_location: truckClosedLocations,

          whs_opened_route: wmsRoute,
          whs_closed_route: [],
          whs_opened_label: warhouseNames_inter,
          whs_closed_label: warhouseNames_cross,
          whs_opened_location: warhouse_inter,
          whs_closed_location: warhouse_cross
        },

        style: {
          symbolSize: 10,
          plane_opened: {
            effect: true,
            color: "#44b7cb", //字体和图标颜色
            lineColor: "#44b7cb", //飞线颜色
            trailColor: "#ffffff", //尾迹颜色
            lineOpacity: 0, //飞线透明度
            trailOpacity: 1, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.7,
            period: 2,
            isShowLabel: true,
            icon: "" //图标svg图片
          },
          plane_closed: {
            effect: false,
            color: "#44b7cb", //字体和图标颜色
            lineColor: "#44b7cb", //飞线颜色
            trailColor: "#b6f3ff", //尾迹颜色
            lineOpacity: 0.05, //飞线透明度
            trailOpacity: 0.8, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.2,
            period: 2,
            isShowLabel: true,
            icon: "" //图标svg图片
          },
          truck_opened: {
            effect: true,
            color: "#9f5eef ", //字体和图标颜色
            lineColor: "#9f5eef", //飞线颜色
            trailColor: "#ddc2ff", //尾迹颜色
            lineOpacity: 0, //飞线透明度
            trailOpacity: 1, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.7,
            period: 6,
            isShowLabel: true,
            icon: "" //图标svg图片
          },
          truck_closed: {
            effect: false,
            color: "#ddc2ff", //字体和图标颜色
            lineColor: "#ddc2ff", //飞线颜色
            trailColor: "#ffffff", //尾迹颜色
            lineOpacity: 0.3, //飞线透明度
            trailOpacity: 0.8, // 尾迹透明度
            trailLength: 0.2,
            lineWith: 2,
            trailWith: 2,
            period: 6,
            isShowLabel: true,

            icon: "" //图标svg图片
          },
          boat_opened: {
            effect: true,
            color: "#ffdf30  ", //字体和图标颜色
            lineColor: "#ffdf30", //飞线颜色
            trailColor: "#fff9ce", //尾迹颜色
            lineOpacity: 0.03, //飞线透明度
            trailOpacity: 1, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.7,
            period: 4,
            isShowLabel: true,
            icon: "" //图标svg图片
          },
          boat_closed: {
            effect: false,
            color: "#ffdf30", //字体和图标颜色
            lineColor: "#ffdf30", //飞线颜色
            trailColor: "#fff9ce", //尾迹颜色
            lineOpacity: 0.03, //飞线透明度
            trailOpacity: 0.8, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.2,
            period: 4,
            isShowLabel: true,
            icon: "" //图标svg图片
          },
          whs_opened: {
            effect: true,
            color: "#ff8808", //字体和图标颜色
            lineColor: "#ff8808", //飞线颜色
            trailColor: "#ff8808", //尾迹颜色
            lineOpacity: 0.1, //飞线透明度
            trailOpacity: 1, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.7,
            period: 6,
            isShowLabel: false,
            icon: "" //图标svg图片
          },
          whs_closed: {
            effect: false,
            color: "#ff8808", //字体和图标颜色
            lineColor: "#ff8808", //飞线颜色
            trailColor: "#ff8808", //尾迹颜色
            lineOpacity: 0.3, //飞线透明度
            trailOpacity: 0.8, // 尾迹透明度
            lineWith: 2,
            trailWith: 2,
            trailLength: 0.2,
            period: 4,
            isShowLabel: true,
            icon: "" //图标svg图片
          }
        }
      }
    };
  },

  created() {
    this.importData();
    this.initPlaneData();
    this.initTruckData();
    this.initBoatData();
    this.initWhsData();
  },

  mounted() {

    var self = this;
    var chartDom = document.getElementById("earth_3d");
    this.myChart = echarts.init(chartDom);

    this.option = {
      globe: {
        baseTexture: this.baseTexture,
        //   heightTexture: ,
        show: true,
        shading: "lambert",

        realisticMaterial: {
          roughness: 0.5
        },

        light: {
          ambient: {
            intensity: this.config.light.ambint
          },
          main: {
            intensity: this.config.light.main
          }
        },

        viewControl: {
          autoRotate: true,
          distance: 200,
          targetCoord: [113.840889, 34.519672],
          autoRotateDirection: "ccw",
          autoRotateSpeed: this.earthRotateSpeed
        },
        postEffect: {
          bloom: {
            enable: true,
            bloomIntensity: 0.3
          },

          enable: true
        }
      },
      series: [
        {
          //已开通航线--飞线
          type: "lines3D",
          name: "plane_opened",
          coordinateSystem: "globe",
          blendMode: "lighter",
          effect: {
            show: self.context.style.plane_opened.effect,
            trailWidth: self.context.style.plane_opened.trailWith,
            trailLength: self.context.style.plane_opened.trailLength,
            period: self.context.style.plane_opened.period,
            trailOpacity: self.context.style.plane_opened.trailOpacity,
            trailColor: self.context.style.plane_opened.trailColor
          },
          silent: false,
          lineStyle: {
            width: self.context.style.plane_opened.lineWith,
            color: self.context.style.plane_opened.lineColor,
            opacity: self.context.style.plane_opened.lineOpacity
          },
          data: self.context.data.plane_opened_route
        },
        {
          //未开通航线--飞线
          type: "lines3D",

          name: "plane_closed",

          coordinateSystem: "globe",

          blendMode: "lighter",

          effect: {
            show: self.context.style.plane_closed.effect,

            trailWidth: this.context.style.plane_closed.trailWith,
            trailLength: this.context.style.plane_closed.trailLength,
            period: this.context.style.plane_closed.period,
            trailOpacity: this.context.style.plane_closed.trailOpacity,
            trailColor: this.context.style.plane_closed.trailColor
          },

          silent: true,

          lineStyle: {
            width: this.context.style.plane_closed.lineWith,

            color: this.context.style.plane_closed.lineColor,

            opacity: this.context.style.plane_closed.lineOpacity
          },

          data: this.context.data.plane_closed_route
        },
        {
          //国内仓库--飞线
          type: "lines3D",
          name: "whs_opened",

          coordinateSystem: "globe",

          blendMode: "lighter",

          effect: {
            show: self.context.style.whs_opened.effect,
            trailWidth: this.context.style.whs_opened.trailWith,
            trailLength: this.context.style.whs_opened.trailLength,
            period: this.context.style.whs_opened.period,
            trailOpacity: this.context.style.whs_opened.trailOpacity,
            trailColor: this.context.style.whs_opened.trailColor
          },

          silent: false,

          lineStyle: {
            width: this.context.style.whs_opened.lineWith,
            color: this.context.style.whs_opened.lineColor,
            opacity: this.context.style.whs_opened.lineOpacity
          },

          data: this.context.data.whs_opened_route
        },
        {
          //已开通卡班--飞线
          type: "lines3D",
          name: "truck_opened",
          coordinateSystem: "globe",

          blendMode: "lighter",

          effect: {
            show: self.context.style.truck_opened.effect,
            trailWidth: this.context.style.truck_opened.trailWith,
            trailLength: this.context.style.truck_opened.trailLength,
            period: this.context.style.truck_opened.period,
            trailOpacity: this.context.style.truck_opened.trailOpacity,
            trailColor: this.context.style.truck_opened.trailColor
          },

          silent: false,

          lineStyle: {
            width: this.context.style.truck_opened.lineWith,

            // color: 'rgb(50, 50, 150)',

            color: this.context.style.truck_opened.lineColor,

            opacity: this.context.style.truck_opened.lineOpacity
          },
          data: this.context.data.truck_opened_route
        },
        {
          //未开通的卡班--飞线
          type: "lines3D",
          name: "truck_closed",

          coordinateSystem: "globe",

          blendMode: "lighter",

          effect: {
            show: self.context.style.truck_closed.effect,
            trailWidth: this.context.style.truck_closed.trailWith,
            trailLength: this.context.style.truck_closed.trailLength,
            period: this.context.style.truck_closed.period,
            trailOpacity: this.context.style.truck_closed.trailOpacity,
            trailColor: this.context.style.truck_closed.trailColor
          },

          silent: false,

          lineStyle: {
            width: this.context.style.truck_closed.lineWith,

            // color: 'rgb(50, 50, 150)',

            color: this.context.style.truck_closed.lineColor,

            opacity: this.context.style.truck_closed.lineOpacity
          },
          data: this.context.data.truck_closed_route
        },
        {
          //已开通轮船--飞线
          type: "lines3D",

          name: "boat_opened",

          coordinateSystem: "globe",

          blendMode: "lighter",

          effect: {
            show: self.context.style.boat_opened.effect,
            trailWidth: this.context.style.boat_opened.trailWith,
            trailLength: this.context.style.boat_opened.trailLength,
            period: this.context.style.boat_opened.period,
            trailOpacity: this.context.style.boat_opened.trailOpacity,
            trailColor: this.context.style.boat_opened.trailColor
          },

          silent: false,

          lineStyle: {
            width: this.context.style.boat_opened.lineWith,

            // color: 'rgb(50, 50, 150)',

            color: this.context.style.boat_opened.lineColor,

            opacity: this.context.style.boat_opened.lineOpacity
          },
          data: this.context.data.boat_opened_route
        },
        {
          //未开通的轮船--飞线
          type: "lines3D",
          name: "boat_closed",

          coordinateSystem: "globe",

          blendMode: "lighter",

          effect: {
            show: self.context.style.boat_closed.effect,
            trailWidth: this.context.style.boat_closed.trailWith,
            trailLength: this.context.style.boat_closed.trailLength,
            period: this.context.style.boat_closed.period,
            trailOpacity: this.context.style.boat_closed.trailOpacity,
            trailColor: this.context.style.boat_closed.trailColor
          },

          silent: false,

          lineStyle: {
            width: this.context.style.boat_closed.lineWith,

            // color: 'rgb(50, 50, 150)',

            color: this.context.style.boat_closed.lineColor,

            opacity: this.context.style.boat_closed.lineOpacity
          },
          data: this.context.data.boat_closed_route
        },
        {
          //开通的航班浮点
          type: "scatter3D",

          name: "plane_opened_scatter",

          coordinateSystem: "globe",

          blendMode: "lighter",

          label: {
            show: this.context.style.plane_opened.isShowLabel,
            distance: 0,
            position: "top",
            textStyle: {
              fontSize: this.fontSize
            },
            formatter: function(obj) {
              return self.context.data.plane_opened_label[obj.dataIndex];
            }
          },

          symbol: this.planePath,
          symbolSize: this.context.style.symbolSize,
          animation: true,
          itemStyle: {
            opacity: 1,
            color: this.context.style.plane_opened.color
          },
          data: this.context.data.plane_opened_location
        },
        {
          //关闭的航班浮点
          type: "scatter3D",

          coordinateSystem: "globe",
          name: "plane_closed_scatter",

          blendMode: "lighter",

          animation: false,

          label: {
            show: this.context.style.plane_closed.isShowLabel,
            distance: 0,
            position: "top",
            formatter: function(obj) {
              return self.context.data.plane_closed_label[obj.dataIndex];
            }
          },

          symbol: this.planePath,
          symbolSize: this.context.style.symbolSize,

          itemStyle: {
            opacity: 1,
            color: this.context.style.plane_closed.color
          },
          data: this.context.data.plane_closed_location
        },
        {
          //国内仓库浮点
          type: "scatter3D",

          name: "whs_opened_scatter",

          coordinateSystem: "globe",

          blendMode: "lighter",

          // symbol:warhousePath,
          symbolSize: 5,

          label: {
            show: this.context.style.whs_opened.isShowLabel,
            distance: 0,
            position: "top",
            textStyle: {
              fontSize: this.fontSize
            },
            formatter: function(obj) {
              return self.context.data.whs_opened_label[obj.dataIndex];
            }
          },
          itemStyle: {
            opacity: 1,
            color: this.context.style.whs_opened.color
          },
          data: this.context.data.whs_opened_location
        },
        {
          //国外仓库--浮点
          type: "scatter3D",
          name: "whs_closed_scatter",

          coordinateSystem: "globe",

          blendMode: "lighter",

          animation: false,

          label: {
            show: this.context.style.whs_closed.isShowLabel,
            distance: 0,
            position: "top",
            textStyle: {
              fontSize: this.fontSize
            },
            formatter: function(obj) {
              return self.context.data.whs_closed_label[obj.dataIndex];
            }
          },

          symbol: this.warhousePath,
          symbolSize: this.context.style.symbolSize,

          itemStyle: {
            opacity: 0.8,
            color: this.context.style.whs_closed.color
          },
          data: this.context.data.whs_closed_location
        },
        {
          //开通的卡班浮点
          type: "scatter3D",
          name: "truck_opened_scatter",

          coordinateSystem: "globe",

          blendMode: "lighter",

          label: {
            show: this.context.style.truck_opened.isShowLabel,
            distance: 0,
            position: "top",
            textStyle: {
              fontSize: this.fontSize
            },
            formatter: function(obj) {
              return self.context.data.truck_opened_label[obj.dataIndex];
            }
          },

          symbol: this.truckPath,
          symbolSize: this.context.style.symbolSize,

          animation: false,

          itemStyle: {
            opacity: 1,
            color: this.context.style.truck_opened.color
          },
          data: this.context.data.truck_opened_location
        },
        {
          //即将开通的卡班浮点
          type: "scatter3D",
          name: "truck_closed_scatter",

          coordinateSystem: "globe",

          blendMode: "lighter",

          label: {
            show: this.context.style.truck_closed.isShowLabel,
            distance: 0,
            position: "top",
            textStyle: {
              fontSize: this.fontSize
            },
            formatter: function(obj) {
              return self.context.data.truck_closed_label[obj.dataIndex];
            }
          },

          symbol: this.truckPath,
          symbolSize: this.context.style.symbolSize,

          animation: false,

          itemStyle: {
            opacity: 0.8,
            color: this.context.style.truck_closed.color
          },
          data: this.context.data.truck_closed_location
        },
        {
          //开通的轮船浮点
          type: "scatter3D",
          name: "boat_opened_scatter",

          coordinateSystem: "globe",

          blendMode: "lighter",

          label: {
            show: this.context.style.boat_opened.isShowLabel,
            distance: 0,
            position: "top",
            // textStyle: {
            //   fontSize: this.fontSize
            // },
            formatter: function(obj) {
              return self.context.data.boat_opened_label[obj.dataIndex];
            }
          },

          symbol: this.boatPath,
          symbolSize: this.context.style.symbolSize,
          itemStyle: {
            opacity: 1,
            color: this.context.style.boat_opened.color
          },
          data: this.context.data.boat_opened_location
        },
        {
          //未开通的轮船浮点
          type: "scatter3D",
          name: "boat_closed_scatter",
          coordinateSystem: "globe",
          blendMode: "lighter",
          label: {
            show: self.context.style.boat_closed.isShowLabel,
            distance: 0,
            position: "top",
            textStyle: {
              fontSize: this.fontSize
            },
            formatter: function(obj) {
              return self.context.data.boat_closed_label[obj.dataIndex];
            }
          },

          symbol: this.boatPath,
          symbolSize: this.context.style.symbolSize,

          itemStyle: {
            opacity: 0.8,
            color: this.context.style.boat_closed.color
          },
          data: this.context.data.boat_closed_location
        }
      ]
    };
    this.myChart.setOption(this.option);
    window.addEventListener("resize", function() {
      self.myChart.resize();
    });
  },

  methods: {
    exists(arrs, locationName) {
      let len = arrs.length;
      for (let i = 0; i < len; i++) {
        if (arrs[i] == locationName) {
          return true;
        }
      }
      return false;
    },
    importData() {
      //customData = require("@/assets/custom.json");
      data = require("@/assets/airway.json");
      wmsData = require("@/assets/wms_blc.json");
      truckData = require("@/assets/traf_blc(1).json");
    },

    initPlaneData() {
      var self = this;
      data.airports.forEach(function(airport) {
        if (airport[2] == "1") {
          airports_opened.push([airport[3], airport[4]]);
        }
      });

      data.airports.forEach(function(airport) {
        if (airport[2] == "0") {
          airports_closed.push([airport[3], airport[4]]);
        }
      });

      data.airports.forEach(function(airport) {
        if (airport[2] == "1") {
          aiportNames_opened.push(airport[1]);
        }
      });

      data.airports.forEach(function(airport) {
        if (airport[2] == "0") {
          aiportNames_closed.push(airport[1]);
        }
      });

      routes = data.routes.map(function(airline) {
        return [
          self.getAirportCoord(airline[1]),
          self.getAirportCoord(airline[2])
        ];
      });

      route2 = data.routesComming.map(function(airline) {
        return [
          self.getAirportCoord(airline[1]),
          self.getAirportCoord(airline[2])
        ];
      });
      this.context.data.plane_opened_route = routes;
      this.context.data.plane_closed_route = route2;
    },

    getAirportCoord(idx) {
      return [data.airports[idx][3], data.airports[idx][4]];
    },

    initTruckData() {
      truck_opened = truckData["kaban_opened"];
      truck_closed = truckData["kaban_comming"];
      truck_opened.forEach(truck => {
        truckOpenedRoutes.push([truck["from_position"], truck["to_position"]]);
        if (!this.exists(truckOpenedName, truck["from"])) {
          truckOpenedName.push(truck["from"]);
          truckLocations.push(truck["from_position"]);
        }

        if (!this.exists(truckOpenedName, truck["to"])) {
          truckOpenedName.push(truck["to"]);
          truckLocations.push(truck["to_position"]);
        }
      });
      truck_closed.forEach(truck => {
        truckClosedRoutes.push([truck["from_position"], truck["to_position"]]);
        if (!this.exists(truckClosedName, truck["from"])) {
          truckClosedName.push(truck["from"]);
          truckClosedLocations.push(truck["from_position"]);
        }

        if (!this.exists(truckClosedName, truck["to"])) {
          truckClosedName.push(truck["to"]);
          truckClosedLocations.push(truck["to_position"]);
        }
      });
    },

    initBoatData() {
      boat_opened = truckData["haiyun_opened"];
      boat_closed = truckData["haiyun_comming"];
      boat_opened.forEach(boat => {
        boatOpenedRoutes.push([boat["from_position"], boat["to_position"]]);
        if (!this.exists(boatOpenedName, boat["from"])) {
          boatOpenedName.push(boat["from"]);
          boatLocations.push(boat["from_position"]);
        }

        if (!this.exists(boatOpenedName, boat["to"])) {
          boatOpenedName.push(boat["to"]);
          boatLocations.push(boat["to_position"]);
        }
      });

      boat_closed.forEach(boat => {
        boatClosedRoutes.push([boat["from_position"], boat["to_position"]]);
        if (!this.exists(boatClosedName, boat["from"])) {
          boatClosedName.push(boat["from"]);
          boatClosedLocations.push(boat["from_position"]);
        }

        if (!this.exists(boatClosedName, boat["to"])) {
          boatClosedName.push(boat["to"]);
          boatClosedLocations.push(boat["to_position"]);
        }
      });
    },

    initWhsData() {
      wmsInter = wmsData["wms_inter"]; //国内仓库
      wmsCross = wmsData["wms_cross"]; //海外仓库
      wmsRouteConfig = wmsData["wms_routes"];
      wmsRoute = wmsRouteConfig.map(function(wmsRoute) {
        return [
          wmsInter[wmsRoute[0]]["position"],
          wmsInter[wmsRoute[1]]["position"]
        ];
      });

      wmsInter.forEach(wms => {
        warhouse_inter.push(wms["position"]);
        warhouseNames_inter.push(wms["name"]);
      });

      wmsCross.forEach(wms => {
        warhouse_cross.push(wms["position"]);
        warhouseNames_cross.push(wms["name"]);
      });

      this.context.data.whs_opened_route = wmsRoute;
    },

    doSwitch(code, value) {
      var option = this.option;
      var series = option.series;
      for (var i = 0; i < series.length; i++) {
        let p = series[i];
        var isTarget = p.name.indexOf(code) != -1;
        if (isTarget) {
          if (value) {
            var isScatter = p.name.indexOf("scatter") == -1 ? false : true;
            var isOpen = p.name.indexOf("opened") == -1 ? false : true;
            if (isScatter) {
              if (code == "plane") {
                p.data = isOpen
                  ? this.context.data.plane_opened_location
                  : this.context.data.plane_closed_location;
              } else if (code == "truck") {
                p.data = isOpen
                  ? this.context.data.truck_opened_location
                  : this.context.data.truck_closed_location;
              } else if (code == "boat") {
                p.data = isOpen
                  ? this.context.data.boat_opened_location
                  : this.context.data.boat_closed_location;
              } else if (code == "whs") {
                p.data = isOpen
                  ? this.context.data.whs_opened_location
                  : this.context.data.whs_closed_location;
              }
            } else {
              if (code == "plane") {
                p.data = isOpen
                  ? this.context.data.plane_opened_route
                  : this.context.data.plane_closed_route;
              } else if (code == "truck") {
                p.data = isOpen
                  ? this.context.data.truck_opened_route
                  : this.context.data.truck_closed_route;
              } else if (code == "boat") {
                p.data = isOpen
                  ? this.context.data.boat_opened_route
                  : this.context.data.boat_closed_route;
              } else if (code == "whs") {
                p.data = isOpen
                  ? this.context.data.whs_opened_route
                  : this.context.data.whs_closed_route;
              }
            }
          } else {
            p.data = [];
          }
        }
      }

      this.myChart.setOption(option);
    }
  }
};
</script>

<style>
[v-cloak] {
  display: none;
}

#earth_3dditu {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legend {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 10px;
}
.legend li{
  padding:0.04rem 0;
}

input[type="checkbox"] {
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0;
}
input[type="checkbox"] {
  width: 13px;
  height: 13px;
  background: url("../../../assets/img/ck_no.png");
  background-size: 100% 100%;
}
input[type="checkbox"]:checked {
  background: url("../../../assets/img/ck_yes.png");
  background-size: 100% 100%;
}
</style>
